<script>
import {
    HomeFilled, UserFilled, User,
    Picture,
    MessageBox,
    Collection,
    Folder,
    Edit,
    MapLocation
} from '@element-plus/icons-vue'
import { routes } from '@/router/index';
export default {
    data() {
        return {
            routes: routes[0].children,
        }
    },
    components: {
        HomeFilled, UserFilled, User,
        Picture,
        MessageBox,
        Collection,
        Folder,
        Edit,
        MapLocation
    },
    mounted() {
        // console.log(this.routes)
    },
}

</script>
<template>
    <!-- collapse-transition 关闭折叠动画 -->
    <el-menu mode="vertical" :collapse-transition="false" e router default-active="/" class="el-menu-vertical-demo">

        <el-menu-item index="/">
            <el-icon>
                <HomeFilled />
            </el-icon>
            <span>首页</span>
        </el-menu-item>

        <el-sub-menu v-for="item in routes" :key="'/' + item.path" :index="'/' + item.path">
            <template #title>
                <el-icon>
                    <component :is="item.icon"></component>
                    <!-- <UserFilled /> -->
                </el-icon>
                <span>{{ item.label }}</span>
            </template>
            <el-menu-item v-for="child in item.children" :key="child.path" :index="`/${item.path}/${child.path}`">{{
                child.label }}</el-menu-item>
            <!-- <el-menu-item index="/manager/userList">用户列表</el-menu-item>
            <el-menu-item index="/manager/managerList">管理员列表</el-menu-item> -->

        </el-sub-menu>

    </el-menu>
</template>